<template>
  <div>
    <!-- //! 顶部搜索 -->
    <div class="top-search">
      <el-form
        :inline="true"
        :model="formInline"
        :rules="poleRules"
        class="demo-form-inline"
      >
        <el-form-item label="一体杆名称：">
          <el-input v-model="formInline.poleName" placeholder="请输入一体杆名称" prop="poleName" />
        </el-form-item>
        <el-form-item label="一体杆编号：">
          <el-input v-model="formInline.poleNumber" placeholder="请输入一体杆编号" prop="poleNumber" />
        </el-form-item>
        <el-form-item label="运行状态：">
          <el-select v-model="formInline.poleStatus" placeholder="请选择运行状态">
            <el-option label="区域一" value="shanghai" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- //! 中间点击按钮 -->
    <div class="button-middle">
      <el-button type="primary" class="button-son" @click="openForm">添加一体杆</el-button>
      <el-button @click="delBatches">批量删除</el-button>
    </div>
    <!-- //! 表格区域 -->
    <div>
      <el-table
        ref="multipleTable"
        :data="renderPoleList"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="50"
        />
        <el-table-column
          label="序号"
          type="index"
          width="90"
        >
          <!-- <template slot-scope="scope">{{ scope.row.date }}</template> -->
        </el-table-column>
        <el-table-column
          prop="poleName"
          label="一体杆名称"
          width="210"
        />
        <el-table-column
          prop="poleNumber"
          label="一体杆编号"
          width="210"
        />
        <el-table-column
          prop="poleIp"
          label="一体杆IP"
          width="120"
        />
        <el-table-column
          prop="areaName"
          label="安装区域"
          width="200"
        />
        <el-table-column
          prop="poleType"
          label="一体杆类型"
          width="180"
        >
          <template #default="scope">
            {{ poleType(scope.row.poleType) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="poleStatus"
          label="运行状态"
          width="120"
          :formatter="poleStatus"
        />
        <el-table-column label="操作">
          <template #default="res">
            <el-button
              size="mini"
              @click="edidPole(res)"
            >编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="delPole(res)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>

    </div>
    <!-- //! 新增区域模块 -->
    <div>
      <el-dialog
      :visible.sync="dialogVisible"
        width="40%"
        @close="closeForm"
      >
        <!-- //? 表单 -->
        <el-form ref="poleFrom" :model="addPoleFrom">
          <el-form-item label="一体杆名称">
            <el-input v-model.trim="addPoleFrom.poleName" />
          </el-form-item>
          <el-form-item label="一体杆编号">
            <el-input v-model.trim="addPoleFrom.poleNumber" />
          </el-form-item>
          <el-form-item label="一体杆IP">
            <el-input v-model.trim="addPoleFrom.poleIp" />
          </el-form-item>

          <!-- //? 下拉表单 -->
          <el-form-item label="关联区域">
            <el-select v-model="addPoleFrom.areaId" placeholder="请选择关联区域">
              <el-option
                v-for="item in dropList"
                :key="item.areaId"
                :label="item.areaName"
                :value="item.areaId"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="一体杆类型">
            <el-select v-model="addPoleFrom.poleType" placeholder="请选择一体杆类型">
              <el-option
                v-for="item in options"
                :key="item.value "
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addBtn">确 定</el-button>
        </span>
      </el-dialog>
    </div>
    <!-- //! 分页区域 -->
    <!-- <div class="block">
      <el-pagination
        :current-page="currentPage4"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div> -->
  </div>
</template>
<script>
// const obj = { username: '小明', age: 18, cat: { catname: '花花', catage: 19 }}
// const obj1 = obj
// obj1.username = '小红'
// console.log(obj, '原数据')
// console.log(obj1, '赋值')

// const obj2 = Object.assign({}, obj)
// obj2.username = '小灰'
// obj2.cat.catname = '同同'
// console.log(obj, '原数据')
// console.log(obj2, '浅拷贝')
// ------------
// const arr = [1, 3, {
//   username: ' kobe'
// }]
// console.log(arr, '原数据')

import { getPoleListAPI, getDropListAPI, addPoleListAPI, delPoleListAPI, editPoleListAPI } from '@/api/pole'
export default {
  data() {
    return {
      //! 顶部搜索表单
      formInline: {
        poleName: '',
        poleNumber: '',
        poleStatus: ''
      },
      //! 顶部表单校验
      poleRules: {
        poleName: [{ required: true, message: '请输入一体杆名称', trigger: 'blur' }],
        poleNumber: [{ required: true, message: '请输入一体杆编号', trigger: 'blur' }]
      },
      //! 表格数据
      tableData: [{
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }],
      //! 渲染数据
      renderPoleList: [],
      //! 接口数据
      params: {
        page: 1,
        pageSize: 10
        // poleName: 'A区一体杆',
        // poleNumber: '001',
        // poleStatus: 0
      },
      //! 弹框
      dialogVisible: false,
      //! 添加表单
      addPoleFrom: {
        poleName: '',
        poleNumber: '',
        poleIp: '',
        areaId: '',
        poleType: ''
      },
      //! 标题位置
      top: 'top',
      //! 下拉列表空数组
      dropList: [],
      //! 下拉列表位置
      options: [{
        value: 'export',
        label: '出口'
      }, {
        value: 'entrance',
        label: '入口'
      }],
      //! 选中状态的空数组
      multipleSelection: [],
      //! 编辑功能判断id
      id: 0,
      //! 改变编辑状态
      title: ''
    }
  },
  mounted() {
    this.poleList()
  },
  methods: {
    //! 渲染
    async poleList() {
      const resquest = await getPoleListAPI(this.params)
      // console.log(resquest.data.rows)
      this.renderPoleList = [...resquest.data.rows]
    },
    //! 修改运行状态
    poleStatus(row) {
      // console.log(row)
      return row.poleStatus ? '异常' : '正常'
    },
    //! 修改类型状态
    poleType(state) {
      // console.log(state)
      const map = {
        entrance: '入口',
        export: '出口',
        center: '中间'
      }
      return map[state]
    },
    // !分页数据
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    },
    //! 查询
    onSubmit() {
      // console.log(1)
    },
    //! 打开表单
    async openForm() {
      this.dialogVisible = true
      this.title = '添加一体杆'
      const res = await getDropListAPI()
      // console.log(res.data)
      this.dropList = [...res.data]
    },
    //! 添加方法
    addBtn() {
      this.$refs.poleFrom.validate(async valid => {
        // console.log(valid)
        if (valid) {
          if (this.id) {
            await editPoleListAPI(this.addPoleFrom)
            this.$message.success('编辑成功')
          } else {
            await addPoleListAPI(this.addPoleFrom)
            this.$message.success('添加成功')
          }

          this.dialogVisible = false
          this.poleList()
        }
      })
    },
    //! 删除方法
    async delPole(del) {
      this.$confirm('是否确认删除当前选中的一体杆?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await delPoleListAPI(del.row.id)
        this.$message({
          type: 'success',
          message: '操作成功!'
        })
        this.poleList()
      }).catch(() => {})
    },
    //! 编辑方法
    async edidPole(edit) {
      this.id = edit.row.id
      this.dialogVisible = true
      this.title = '编辑一体杆'
      // console.log(edit.row)
      const { id, areaId, poleName, poleIp, poleNumber, poleType } = edit.row
      this.addPoleFrom = { id, areaId, poleName, poleIp, poleNumber, poleType }
    },
    //! 关闭弹框的方法
    closeForm() {
      this.addPoleFrom = {}
    },
    //! 选中状态的方法
    handleSelectionChange(val) {
      const arr = val.map(item => item.id)
      this.multipleSelection = arr
    },
    //! 批量删除
    async delBatches() {
      await delPoleListAPI(this.multipleSelection)
      this.poleList()
    }
  }
}

</script>
<style lang="scss" scoped>
.top-search {
  border-bottom: 1px solid rgb(237,237,237,.9);
}
.button-middle {
  margin-right:20px ;
  .button-son{
    margin-right: 20px;
  }
}
.block{
  float: right;
}
</style>
